<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post">
        <p>
            <span>用户名：</span><input type="text" id="username">
        </p>
        <p>
            <span>性别：</span>
            <input type="radio" name="sex" value="nan" id="boy"> 男
            <input type="radio" name="sex" value="nv" id="girl"> 女
        </p>
    </form>

    <script>
        'use strict'
        // 获取输入框的值
        let inputUsername = document.getElementById('username');
        let value = inputUsername.value;
        // 修改输入框的值
        inputUsername.value = 'ni hao';

        // 获取单选框的值
        let boyRadio = document.getElementById('boy');
        let girlRadio = document.getElementById('girl');
        console.log(boyRadio.value);  // 这样只能拿到 value 属性的值，我们需要的是选中的值
        // 需要判断是否被选中   boyRadio.checked 判断是否被选中，返回一个 boolean 值
        if (boyRadio.checked) {
            console.log(boyRadio.value);
        }

        // 也可以设置值，用代码操控选中 女
        girlRadio.checked = true;
    </script>

</body>
</html>